<template>
  <div>
    <div class="step flex_aic_jcc mt50">
      <div
        class="step-item flex"
        :class="{ active: stepCurrent === index }"
        v-for="(item, index) in stepList"
        :key="item.label"
      >
        <div class="left_line"></div>
        <div class="flex_fdc_aic">
          <div class="step-item-icon">
            <img :src="getIcon(item.icon, index)" alt="" />
          </div>
          <div class="step-item-label mt10">
            {{ item.label }}
          </div>
          <div class="step-item-time">{{ item.time && moment(item.time).format("YYYY-MM-DD HH:mm:ss") }}</div>
        </div>
        <div class="right_line"></div>
      </div>
    </div>
    <div class="fs-26 text-center mb10 mt32">{{ statusText }}</div>
  </div>
</template>

<script setup>
import moment from "moment";
import { ref, watchEffect } from "vue";
import { useI18n } from "vue-i18n";

const { t } = useI18n();

const iconMap = {
  fabu: new URL(`@/assets/images/order_lists/fabu.png`, import.meta.url).href,
  fabugray: new URL(`@/assets/images/order_lists/fabu-gray.png`, import.meta.url).href,
  fabuhot: new URL(`@/assets/images/order_lists/fabu-hot.png`, import.meta.url).href,

  fukuan: new URL(`@/assets/images/order_lists/fukuan.png`, import.meta.url).href,
  fukuangray: new URL(`@/assets/images/order_lists/fukuan-gray.png`, import.meta.url).href,
  fukuanhot: new URL(`@/assets/images/order_lists/fukuan-hot.png`, import.meta.url).href,

  fahuo: new URL(`@/assets/images/order_lists/fahuo.png`, import.meta.url).href,
  fahuogray: new URL(`@/assets/images/order_lists/fahuo-gray.png`, import.meta.url).href,
  fahuohot: new URL(`@/assets/images/order_lists/fahuo-hot.png`, import.meta.url).href,

  wancheng: new URL(`@/assets/images/order_lists/wancheng.png`, import.meta.url).href,
  wanchenggray: new URL(`@/assets/images/order_lists/wancheng-gray.png`, import.meta.url).href,
  wanchenghot: new URL(`@/assets/images/order_lists/wancheng-hot.png`, import.meta.url).href,
};

const statusText = ref("");
const props = defineProps({
  detail: {
    type: Object,
    default: () => ({}),
  },
});
const step1 = ref([
  {
    label: t('orderStep.提交订单'),
    time: "2025-03-18 10:00:00",
    icon: "fabu",
  },
  {
    label: t('orderStep.订单完成'),
    time: "2025-03-18 10:00:00",
    icon: "wancheng",
  },
]);
const step2 = ref([
  {
    label: t('orderStep.提交订单'),
    time: "2025-03-18 10:00:00",
    icon: "fabu",
  },
  {
    label: t('orderStep.订单取消'),
    time: "2025-03-18 10:00:00",
    icon: "wancheng",
  },
]);

const stepList = ref(props.detail.status == -1 ? step2.value : step1.value);
const stepCurrent = ref(0);
const getIcon = (icon, index) => {
  let _icon = "";
  if (stepCurrent.value === index) {
    _icon = `${icon}hot`;
  } else if (stepCurrent.value > index) {
    _icon = `${icon}`;
  } else {
    _icon = `${icon}gray`;
  }

  return iconMap[_icon];
};

// 订单状态：-1已取消，1待付款 5已完成
watchEffect(() => {
  if (props.detail.status == -1) {
    stepCurrent.value = 1;
    statusText.value = t('orderStep.订单已取消');
    stepList.value = step2.value;
    stepList.value[0].time = props.detail.createdTime;
    stepList.value[1].time = props.detail.cancelTime;
  } else {
    stepList.value = step1.value;
    stepList.value[0].time = props.detail.createdTime;
    stepList.value[1].time = props.detail.signTime;
    if (props.detail.status == 1) {
      stepCurrent.value = 0;
      statusText.value = t('orderStep.等待买家付款');
    } else if (props.detail.status == 5) {
      stepCurrent.value = 1;
      statusText.value = t('orderStep.订单完成');
    } else {
      stepCurrent.value = 0;
    }
  }
});
</script>

<style lang="scss" scoped>
.step {
  .step-item {
    &-icon {
      img {
        width: 75px;
        height: 75px;
      }
    }
    &-label {
      color: rgb(153, 153, 153);
      line-height: 22px;
    }
    &-time {
      color: rgba(24, 144, 255, 0.5);
      line-height: 22px;
      height: 22px;
    }

    &.active {
      .left_line,
      .right_line {
        background-color: #1890ff;
      }
      .step-item-label {
        color: #1890ff;
      }
    }

    .left_line,
    .right_line {
      width: 50px;
      height: 1px;
      background-color: #e5e5e5;
      margin-top: 37.5px;
    }
  }
}
</style>
